<template>
  <div class="integral fixed bottom-0 left-0 right-0 top-0 h-100% overflow-y-auto" style="background: linear-gradient(180deg, #FFF 0%, #F5F5F5 100%);">
    <div class="sticky left-0 right-0 top-0 z-999">
      <div class="relative">
        <image class="pointer-events-none absolute left-0 right-0 top-0 w-full"
               :src="`${cdnUrl}/imgs/detail/bg.png${imgVersion}`" mode="aspectFill" />
        <div class="z-999 flex items-center px-20rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <text class="text-36rpx font-600">领劵中心</text>
        </div>
      </div>
    </div>
    <div class="mt-48rpx box-border px-32rpx">
      <div v-for="item in couponList" class="item mb-32rpx h-164rpx flex items-center">
        <div class="min-w-204rpx text-hex-fff">
          <div class="relative">
            <image
              class="z--1 h-164rpx w-184rpx"
              :src="`${cdnUrl}/imgs/mine/my_slices/certificate1.png${imgVersion}`" mode="aspectFill" />
            <div class="absolute left-35rpx top-25rpx">
              <span class="ml-25rpx text-28rpx">{{ item.couponType===0?'满减券':'立减券' }}</span>
              <span class="text-32rpx font-600">￥</span>
              <span class="text-60rpx font-600">{{ item.discountAmount }}</span>
            </div>
          </div>
        </div>
        <div class="ml-32rpx flex-1">
          <div class="flex flex-1 items-center justify-between text-36rpx font-600 text-hex-333">
            {{ item.strategyName }}
          </div>
          <div v-if="item.couponValidType===0" class="mt-44rpx flex items-center items-center justify-between text-24rpx text-hex-999999">
            有效期:{{ item.validDayTime }}天
          </div>
          <div v-if="item.couponValidType===1" class="mt-44rpx flex items-center items-center justify-between text-24rpx text-hex-999999">
            有效期:{{ formateTime(item.validTimeRangeBegin) }}至{{ formateTime(item.validTimeRangeEnd) }}
          </div>
        </div>
        <div
          class="box-border flex items-center justify-center rounded-24rpx bg-hex-FF7C48 px-24rpx py-4rpx text-28rpx text-hex-ffffff"
          @click="handleClaimCoupon(item.id, item.totalSupply)">
          领取
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { useUserStore } from '@/stores/user'

let userStore: any = useUserStore()
let searchBarTop: any = $ref('24')
let rightBar: any = $ref(0)
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width

  // #endif
})
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}

const formateTime = (time) => {
  if (time) {
    let tempArr: any = []
    tempArr = time.split('.')
    console.log(tempArr, 'tempArrtempArr')
    return tempArr[0].replace('T', ' ')
  }
}

let couponList: any = $ref([])
let pageNo: any = $ref(1)
let pageSize: any = $ref(10)
let isGetMore: any = $ref(false)
const getCouponList = async () => {
  let reqData = {
    method: 'get',
    data: {
      'pageNo': pageNo,
      'pageSize': pageSize,
    },
    headers: { UserId: userStore.user.id },
  }
  const { status, data, error } = await Fetch('/qqyapi/coupon/couponCenter/queryCouponClaimStrategyDTO', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    couponList = couponList.concat(data?.result?.list)
    if (couponList.length < Number(data?.result?.total)) {
      isGetMore = true
      return
    }
    isGetMore = false
  }
}

// 领取优惠券
const handleClaimCoupon = async (id, num) => {
  if (Number(num) < 1) {
    uni.showToast({
      title: '暂无优惠券可领',
      icon: 'none',
    })
    return
  }
  let reqData = {
    method: 'post',
    data: {
      'strategyId': id,
      'userId': userStore.user.id,
    },
    headers: { UserId: userStore.user.id },
  }
  const { status, data, error } = await Fetch('/qqyapi/coupon/couponCenter/claimCoupon', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    couponList = []
    pageNo = 1
    getCouponList()
    uni.showToast({
      title: '领取成功',
      icon: 'success',
    })
    setTimeout(() => {
      navTo('/pages-mine/coupon?id=1')
    }, 1500)
  }
}

onReachBottom(() => {
  if (isGetMore) {
    pageNo++
    getCouponList()
  }
})
onMounted(() => {
  getCouponList()
})

</script>

<style lang='scss' scoped>
</style>
